<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">

   <link rel="stylesheet" href="/css/newStyle.css">
   <link rel="stylesheet" href="/css/new.css">
   <style>
      .box-c a{
         display: block;
      }
      .error{
         color: red;
      }

      .sd{
         margin:5px;
         width:32%;
         height:150px;
         background: var(--main-color);
         background: linear-gradient(to bottom, #e6f7ff, #b3e5fc);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-radius: 8px;
         display: flex;
         justify-content: center;
         align-content: center;
         flex-direction: column;
         color: var(--text-color-title);
         font-size: 28px;
      }
   </style>
</head>
<body style="min-width: 1200px;">
   <div th:insert="common/header :: header"></div>
   <section>
      <div class="ai-contain">
         <div class="main">
            <div class="left" id="left">
               <!-- 轮播图容器 -->
               <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <!-- 指示器 -->
                  <ol class="carousel-indicators">
                     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                  </ol>

                  <!-- 轮播图内容 -->
                  <div class="carousel-inner">
                     <div class="carousel-item active">
                        <a th:href="@{/uis/detailUI?id=1}" target="_blank"><img src="/images/news/banner1.jpg" class="d-block w-100" alt="图片1"></a>
                     </div>
                     <div class="carousel-item">
                        <a th:href="@{/uis/detailUI?id=1}" target="_blank"><img src="/images/news/banner2.jpg" class="d-block w-100" alt="图片2"></a>
                     </div>
                  </div>

                  <!-- 左右控制按钮 -->
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                     <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
                     <span class="sr-only">Next</span>
                  </a>
               </div>
<!--               <div style="display: flex;margin-top:20px;">-->
<!--                  <div class="sd"><p style="padding:0 30px;text-align: center">青少年人工智能大赛</p></div>-->
<!--                  <div class="sd"><p style="padding:0 10px;text-align: center">官方赛道</p></div>-->
<!--                  <div class="sd"><p style="padding:0 10px;text-align: center">文旅赛道</p></div>-->
<!--               </div>-->
<!--               <div>-->
<!--                  <div id="dplayer"></div>-->
<!--               </div>-->

               <!-- 左侧主要内容 大赛视频 -->
<!--               <div class="l-content">-->
<!--                  <div class="c-title">-->
<!--                     <div class="t-t">大赛视频</div>-->
<!--                  </div>-->
<!--                  <div class="c-content d-flex">-->
<!--                     <div class="c-item">-->
<!--                        <div><img src="/images/news/l2.jpg" class="d-block w-100" alt="图片3"></div>-->
<!--                        <div class="text-center">汇聚AI巨擘，共绘产业</div>-->
<!--                     </div>-->
<!--                     <div class="c-item">-->
<!--                        <div><img src="/images/news/l2.jpg" class="d-block w-100" alt="图片3"></div>-->
<!--                        <div class="text-center">汇聚AI巨擘，共绘产业</div>-->
<!--                     </div>-->
<!--                     <div class="c-item">-->
<!--                        <div><img src="/images/news/l2.jpg" class="d-block w-100" alt="图片3"></div>-->
<!--                        <div class="text-center">汇聚AI巨擘，共绘产业</div>-->
<!--                     </div>-->
<!--                     <div class="c-item">-->
<!--                        <div><img src="/images/news/l2.jpg" class="d-block w-100" alt="图片3"></div>-->
<!--                        <div class="text-center">汇聚AI巨擘，共绘产业</div>-->
<!--                     </div>-->
<!--                  </div>-->
<!--               </div>-->

               <!-- 左侧主要内容 大赛新闻 -->
               <div class="l-content">
                  <div class="c-title">
                     <div class="t-t">大赛新闻</div>
                     <div class="t-more"><a th:href="@{/uis/listUI?id=1}" target="_blank">更多&nbsp;></a></div>
                  </div>
                  <div class="c-content d-flex" id="xinwen">
                     <div class="c-item">
                        <div><img src="/images/news/photo1.jpg" class="d-block w-100" alt="图片3"></div>
                        <div class="i-c text-center">汇聚AI巨擘，共绘产业</div>
                     </div>
                     <div class="c-item">
                        <div><img src="/images/news/photo2.jpg" class="d-block w-100" alt="图片3"></div>
                        <div class="i-c text-center">汇聚AI巨擘，共绘产业</div>
                     </div>
                     <div class="c-item">
                        <div><img src="/images/news/photo3.jpg" class="d-block w-100" alt="图片3"></div>
                        <div class="i-c text-center">汇聚AI巨擘，共绘产业</div>
                     </div>
                     <div class="c-item">
                        <div><img src="/images/news/photo4.jpg" class="d-block w-100" alt="图片3"></div>
                        <div class="i-c text-center">汇聚AI巨擘，共绘产业</div>
                     </div>
                  </div>
               </div>

               <!-- 左侧主要内容 大赛照片 -->
               <div class="l-content">
                  <div class="c-title">
                     <div class="t-t">大赛照片</div>
                  </div>
                  <div class="c-content d-flex">
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo1.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo2.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo3.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo4.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                  </div>
                  <div class="c-content d-flex">
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo5.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo6.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo7.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo8.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                  </div>
                  <div class="c-content d-flex">
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo9.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo10.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo11.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                     <div class="c-item">
                        <div class="c-img"><img src="/images/news/photo12.jpg" class="d-block w-100" alt="图片3"></div>
                     </div>
                  </div>
               </div>

               <!-- 左侧主要内容 友情链接 -->
               <div class="l-content">
                  <div class="c-title">
                     <div class="t-t">友情链接</div>
                  </div>
                  <div class="c-content d-flex">
                     <div class="c-item">
                        <a href="http://www.citif.org.cn/CFEII/miit/#/index" target="_blank">
                           <div class="friend-link"><img src="/images/logos/zhuban1.png" alt="中国电子行业信息联合会"></div>
                        </a>
                     </div>
                     <div class="c-item">
                        <a href="http://www.hxedu.com.cn" target="_blank">
                           <div class="friend-link"><img src="/images/logos/zhuban2.png" alt="华信教育资源网"></div>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="right" id="right">
               <div class="r-box">
                  <div class="box-t d-flex-space">
                     <div>大赛动态</div>
                     <div class="t-body"><a th:href="@{/uis/listUI?id=3}" target="_blank">更多&nbsp;></a></div>
                  </div>
                  <div class="box-c" id="dongtai">
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">首届大赛开幕式</div>-->
<!--                        <div class="c-r">2024-10-11</div>-->
<!--                     </div>-->
<!--                     <div class="box-line"></div>-->
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">初赛第一日</div>-->
<!--                        <div class="c-r">2024-11-16</div>-->
<!--                     </div>-->
<!--                     <div class="box-line"></div>-->
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">22支队伍获奖、多项创新成果发布</div>-->
<!--                        <div class="c-r">2024-11-21</div>-->
<!--                     </div>-->
                  </div>
               </div>

               <div class="r-box">
                  <div class="box-t d-flex-space">
                     <div>大赛通知</div>
                     <div class="t-body"><a th:href="@{/uis/listUI?id=2}" target="_blank">更多&nbsp;></a></div>
                  </div>
                  <div class="box-c" id="tongzhi">
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">参赛团队需提前到达领取资料</div>-->
<!--                        <div class="c-r">2024-10-11</div>-->
<!--                     </div>-->
<!--                     <div class="box-line"></div>-->
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">参赛团队尽快将资料完善</div>-->
<!--                        <div class="c-r">2024-11-16</div>-->
<!--                     </div>-->
<!--                     <div class="box-line"></div>-->
<!--                     <div class="box-group">-->
<!--                        <div class="c-l">22支队伍获奖、多项创新成果发布</div>-->
<!--                        <div class="c-r">2024-11-21</div>-->
<!--                     </div>-->
                  </div>
               </div>

               <div class="r-box">
                  <div class="c-title">
                     <div class="t-t">大赛推荐</div>
                  </div>
                  <div style="padding:10px;">
                     <div>
                        <a href="https://www.hxedu.com.cn/hxedu/hg/book/bookInfo.html?code=TP470570" target="_blank" style="display: block;">
                           <div class="recommend"><img src="/images/books/book1.jpg" class="d-block" height="200" alt="AI提示工程——基础 •应用•实例"></div>
                           <div class="text-center" style="line-height: 45px;color: #222222;">AI提示工程——基础 •应用•实例</div>
                        </a>
                     </div>
                  </div>
                  <div style="padding:10px;">
                     <div>
                        <a href="https://www.hxedu.com.cn/hxedu/hg/book/bookInfo.html?code=G0456900" target="_blank" style="display: block;">
                           <div class="recommend"><img src="/images/books/book2.jpg" class="d-block" height="200" alt="大数据分析与挖掘实验教程"></div>
                           <div class="text-center" style="line-height: 45px;color: #222222;">大数据分析与挖掘实验教程</div>
                        </a>
                     </div>
                  </div>
                  <div style="padding:10px;">
                     <div>
                        <a href="https://www.hxedu.com.cn/hxedu/hg/book/bookInfo.html?code=G0452380" target="_blank" style="display: block;">
                           <div class="recommend"><img src="/images/books/book3.jpg" class="d-block" height="200" alt="R语言大数据分析与挖掘"></div>
                           <div class="text-center" style="line-height: 45px;color: #222222;">R语言大数据分析与挖掘</div>
                        </a>
                     </div>
                  </div>
                  <div style="padding:10px;">
                     <div>
                        <a href="https://www.hxedu.com.cn/hxedu/hg/book/bookInfo.html?code=G0427800" target="_blank" style="display: block;">
                           <div class="recommend"><img src="/images/books/book4.jpg" class="d-block" height="200" alt="大数据分析与挖掘实用案例教程"></div>
                           <div class="text-center" style="line-height: 45px;color: #222222;">大数据分析与挖掘实用案例教程</div>
                        </a>
                     </div>
                  </div>
                  <div style="padding:10px;">
                     <div>
                        <a href="https://www.hxedu.com.cn/hxedu/hg/book/bookInfo.html?code=G0439670" target="_blank" style="display: block;">
                           <div class="recommend"><img src="/images/books/book5.jpg" class="d-block" height="200" alt="Python编程——从计算思维到编程实践"></div>
                           <div class="text-center" style="line-height: 45px;color: #222222;">Python编程——从计算思维到编程实践</div>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <!--====== BACK TOP TOP PART START ======-->

   <a href="#" class="back-to-top">∧</a>

   <!--====== BACK TOP TOP PART ENDS ======-->

   <!-- ICP备案信息 -->
   <div style="width: 100%" th:insert="common/footer :: footer"></div>
   <!--====== Jquery js ======-->
   <script src="/js/jquery-1.12.4.min.js"></script>
   <script src="/js/jquery-validate.js"></script>
   <script src="/js/bootstrap.min.js"></script>
   <!--====== sweetalert js ======-->
   <script src="/js/sweetalert.min.js"></script>
   <!--====== layerUI js ======-->
   <script src="/js/layui/layui.js"></script>
   <script src="/js/DPlayer.min.js"></script>
   <script src="/js/index.js"></script>
   <script src="/js/common.js"></script>
   <script>
      // const dp = new DPlayer({
      //    container: document.getElementById('dplayer'),
      //    autoplay: false,
      //    theme: '#FADFA3',
      //    loop: false,
      //    lang: 'zh-cn',
      //    screenshot: true,
      //    hotkey: true,
      //    preload: 'auto',
      //    logo: '/images/logo2.png',
      //    volume: 0.7,
      //    mutex: true,
      //    video: {
      //       url: '/accessExternalImage/n.mp4',
      //       pic: '/accessExternalImage/6e0eaf9f-b03f-4cf4-aa84-8cddec4490f8.jpg',
      //       thumbnails: 'thumbnails.jpg',
      //       type: 'auto',
      //    },
      //    highlight: [
      //       {
      //          time: 20,
      //          text: '这是第 20 秒',
      //       },
      //       {
      //          time: 120,
      //          text: '这是 2 分钟',
      //       },
      //    ],
      // });
      layui.use(function(){
         $.ajax({
            url: '/news/index',
            type: 'GET',
            success: function (data) {
               // 清空动态内容
               $('#dongtai').empty();
               $('#tongzhi').empty();
               $('#xinwen').empty();
               // 根据获取到的数据重新构建表格内容
               let dongtai = '';
               let tongzhi = '';
               let xinwen = '';
               data.data.forEach(function (info) {
                  if(info.type == 3){
                     if(info.title.length>14){
                        info.title = info.title.substring(0, 14) + '...';
                     }
                     dongtai += '<a href="/uis/detailUI?id=' + info.id + '" target="_blank"><div class="box-group">' +
                             '           <div class="c-l">' + info.title + '</div>' +
                             '           <div class="c-r">' + info.createTimeName1 + '</div>' +
                             '       </div></a>' +
                             '<div class="box-line"></div>';
                  }else if(info.type == 2){
                     if(info.title.length>14){
                        info.title = info.title.substring(0, 14) + '...';
                     }
                     tongzhi += '<a href="/uis/detailUI?id=' + info.id + '" target="_blank"><div class="box-group">' +
                             '           <div class="c-l">' + info.title + '</div>' +
                             '           <div class="c-r">' + info.createTimeName1 + '</div>' +
                             '       </div></a>' +
                             '<div class="box-line"></div>';
                  }else if(info.type == 1){
                     if(info.title.length>10){
                        info.title = info.title.substring(0, 10) + '...';
                     }
                     xinwen += '<div class="c-item"><a href="/uis/detailUI?id=' + info.id + '" target="_blank">' +
                             '   <div class="c-img"><img src="' + imagesUrl + info.images + '" class="d-block w-100" alt="图片3"></div>' +
                             '   <div class="i-c text-center">' + info.title + '</div>' +
                             ' </a></div>';
                  }

               });
               $('#xinwen').html(xinwen);

               const dongtaiArr = dongtai.split('</div>');
               dongtaiArr.pop();
               dongtaiArr.pop(); // 移除最后一个元素（对应最后一个box-line）
               $('#dongtai').html(dongtaiArr.join('</div>'));

               // 移除tongzhi中的最后一个box-line元素
               const tongzhiArr = tongzhi.split('</div>');
               tongzhiArr.pop();
               tongzhiArr.pop();
               $('#tongzhi').html(tongzhiArr.join('</div>'));

               //===== images scale
               const images = document.querySelectorAll('.c-item img');
               images.forEach(function (img) {
                  img.addEventListener('mouseover', function () {
                     this.style.transform = 'scale(1.2)'; // 放大1.2倍，你可以根据需求调整倍数
                  });
                  img.addEventListener('mouseout', function () {
                     this.style.transform = 'scale(1)'; // 还原到原始大小
                  });
               });

            },
            error: function (error) {
               layer.msg('获取数据失败：' + error.responseText);
            }
         });
      });
   </script>
</body>
</html>
